<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            padding: 20px 100px;
            display: flex;
            flex-direction: column;
            align-items: center;
            border: 1px solid #999;
            border-radius: 6px;
            margin: 100px auto;
        }
        
        .box p {
            display: flex;
            align-items: center;
        }
        
        .box p label {
            width: 80px;
            text-align: left;
        }
        
        .box p input {
            outline: none;
        }
        
        .box p button {
            border: none;
            outline: none;
            width: 200px;
            padding: 5px 60px;
            border-radius: 6px;
            margin: 20px auto 0;
            background-color: #f00;
            color: #fff;
            font-weight: 700;
        }
    </style>
</head>

<body>
    <div class="box">
        <h1>白金会员注册系统</h1>
        <form action="">
            <p>
                <label for="">姓&nbsp;&nbsp;&nbsp;名：</label> <input type="text" class="username">
            </p>
            <p>
                <label for="">手机号：</label> <input type="tel" class="tel">
            </p>
            <p>
                <label for=""> 密&nbsp;&nbsp;&nbsp;码：</label> <input type="password" class="password">
            </p>
            <p><button>注册</button></p>
        </form>
    </div>

    <script>
        function insert() {
            var name = document.querySelector(".username");
            var tel = document.querySelector(".tel");
            var pw = document.querySelector(".password");
            var btn = document.querySelector("button");

            btn.onclick = function(e) {
                e.preventDefault();
                var nameVal = name.value;
                var telVal = tel.value;
                var pwVal = pw.value;


                var xhr = new XMLHttpRequest();

                xhr.open('get', `./02_insert.php?username=${nameVal}&tel=${telVal}&pw=${pwVal}`, true);
                xhr.send();

                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        if (JSON.parse(xhr.responseText).code == 0) {
                            alert("注册成功了，别迷，赶紧去登陆");
                        } else {
                            alert("诶是，注册失败，赶紧重新注册，给爷爬");
                        }
                    }
                }
            }

        }
        insert();
    </script>
</body>

</html>